Countdown Timer

JavaScript重點

1. 取得Deadline與1970/01/01的時間差

   const futureTime = futureDate.getTime();
   

   • Date.getTime()可以計算該Date物件離1970/01/01的毫秒數

2. 新增getRemaindingTime()函數

   function getRemaindingTime() {
      //內容...
   }
   

   • 以下程式碼皆在getRemaindingTime()函數內

3. 取得當前時間與1970/01/01的時間差

   const today = new Date().getTime();
   

4. 計算當前時間與Deadline的時間差

   const t = futureTime - today;
   

5. 計算一天、一小時與一分鐘的毫秒數

   const oneDay = 24 * 60 * 60 * 1000;
   const oneHour = 60 * 60 * 1000;
   const oneMinute = 60 * 1000;
   

6. 將時間毫秒差轉換成天數、小時數、分鐘數與秒數

   let days = Math.floor(t / oneDay); //計算天數
   let hours = Math.floor((t % oneDay) / oneHour); //計算小時數
   let minutes = Math.floor((t % oneHour) / oneMinute); //分鐘數
   let seconds = Math.floor((t % oneMinute) / 1000); //秒數
   

7. 將以上記錄存進value陣列中

   const values = [days, hours, minutes, seconds];
   

8. 新增format()函數 : 將value中只有個位數的元素補0

   function format(item) {
       if (item < 10) {
         return (item = `0${item}`);
       }
       return item;
   };
   

9. 將value中的數值丟進個別時間單位DIV中

   items.forEach(function (item, index) {
       item.innerHTML = format(values[index]);
   });
   

10. (回到最外層)新增重複執行的函數

    let countdown = setInterval(getRemaindingTime, 1000);
    

    • setInterval(func, [delay])用法 :
      • 功能 : 每隔指定的毫秒數迴圈呼叫函式或表示式
      • func : 被執行的函式
      • [delay] : 延遲的時間(毫秒數)
      • setTimeout()的功能也相當類似。但setInterval()會重複執行；而setTimeout()只會執行一次

11. 將下列程式碼加進getRemaindingTime()中，設定當倒數時間歸零後顯示的文字

    if (t < 0) {
        clearInterval(countdown); //結束countdown
        deadline.innerHTML = `<h4 class="expired">sorry, this giveaway has expired!</h4>`;
    }
    

    • clearInterval可以用來取消setInterval()

參考與引用來源

1. getTime()介紹
2. setTimeout()與setInterval()的差異